<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Banner图片切换</title>
  <link rel="stylesheet" href="./css/index.css" />
</head>

<body>
  <div id="mask">
    <div class="center">
      <h2 class="title">天猫双十二惊喜袭来</h2>
      <img :src="images[index]" alt="未正确加载图片资源" />
      <!-- <img src="./images/01.jpg" alt="未正确加载图片资源" /> -->
      <a href="javascript:void(0)" class="left" @click="prev" v-show="index>0" >
        <img src="./images/left.png" alt="" />
      </a>
      <a href="javascript:void(0)" class="right" @click="next" v-show="index<3" />
        <img src="./images/right.png" alt="" >
      </a>
    </div>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    let app = new Vue({
      el: "#mask",
      data: {
        index: 0,
        images: ["./images/01.jpg", "./images/02.jpg", "./images/03.jpg", "./images/04.jpg"],
      },
      methods: {
        prev() {
          
          this.index--;
         },
         next() {
          this.index++;
         }
      },
    });
  </script>
</body>

</html>